import React, {
  memo,
  useCallback,
  useMemo
} from 'react'

const Child = memo((props) => {
  console.log('----- Child render ----')

  return (
    <div className='child'>
      <h5>子组件</h5>
      <button onClick={() => props.cb()}>按钮</button>
    </div>
  )
})

export default function Home(props) {
  const [num, setNum] = React.useState(0)
  const getDep = () => {
    return {
      foo: 'foo'
    }
  }
  const dep = JSON.stringify(getDep())
  React.useEffect(() => {
    console.log('----- Home useEffect -----')
  }, [dep])

  const cb = useCallback(() => {
    console.log('Home 传给 Child 的 cb 函数');
  }, [])

  const getCount = useMemo(() => {
    let sum = 0
    console.time('--计算--')
    for (var i = 0; i < 50000000; i++) {
      sum = sum + Math.random()
    }
    console.timeEnd('--计算--')
    return sum
  }, [])

  return (
    <>
      Home
      <div className='group'>
        <p>home组件数据num：{num}</p>
        <p>耗时计算：{getCount}</p>
        <button onClick={() => setNum(num + 1)}>修改num的值</button>
        <Child cb={cb} />
      </div>
    </>
  )
}
